<template>
	<div>
		<vxe-modal v-model="dialogVisible" title="请填写电池包相关信息" width="800" height="330" show-zoom resize remember>
			<template #default>
				<vxe-form title-colon ref="xForm" title-align="right" title-width="130" :data="formData2"
					:rules="formRules2" :loading="loading2" @submit="submitEvent2" @reset="resetEvent">
					<vxe-form-gather span="12">

						<vxe-form-item title="电池包号" field="batNo" span="24" :item-render="{}" title-overflow="title">
							<template #default="params">
								<vxe-input v-model="params.data.batNo" placeholder="请输入电池包号" clearable
									@input="$refs.xForm.updateStatus(params)"></vxe-input>
							</template>
						</vxe-form-item>
						<vxe-form-item title="生产日期" field="pd" span="24" :item-render="{}" title-overflow="ellipsis">
							<template #default="params">
								<vxe-input v-model="params.data.pd" :transfer="true" type="date" placeholder="请选择日期"
									clearable @change="$refs.xForm.updateStatus(params)"></vxe-input>
							</template>
						</vxe-form-item>
						<vxe-form-item title="销售日期" field="sd" span="24" :item-render="{}" title-overflow="ellipsis">
							<template #default="params">
								<vxe-input v-model="params.data.sd" :transfer="true" type="date" placeholder="请选择日期"
									clearable @change="$refs.xForm.updateStatus(params)"></vxe-input>
							</template>
						</vxe-form-item>
					</vxe-form-gather>
					<vxe-form-gather span="12">
						<vxe-form-item title="所属公司" field="companyId" span="24" :item-render="{}"
							title-overflow="ellipsis">
							<template #default="params">
								<el-select v-model="params.data.companyId" :disabled="userinfo.companyid!=1" filterable
									clearable @change="compancheg" placeholder="请选择">
									<el-option v-for="item in companylist" :key="item.id" :label="item.nameCN"
										:value="item.id">
									</el-option>
								</el-select>
							</template>
						</vxe-form-item>
						<vxe-form-item title="所属运营部门" field="operationDepartment" span="24" :item-render="{}"
							title-overflow="ellipsis">
							<template #default="params">
								<el-select v-model="params.data.operationDepartment" filterable clearable
									@change="slel" placeholder="请选择所属运营部门" v-if="showment">
									<el-option :value="item.id" :label="item.name" v-for="(item,index) in departmentlist"
										:key="item.id">
									</el-option>
								</el-select>
							</template>
						</vxe-form-item>
						<vxe-form-item title="电池类型" field="batTypeId" span="24" :item-render="{}"
							title-overflow="ellipsis">
							<template #default="params">
								<el-select v-model="params.data.batTypeId" filterable clearable
									@change="$refs.xForm.updateStatus(params)" placeholder="请选择电池类型">
									<el-option :value="item.id" :label="item.batType" v-for="(item,index) in typeList"
										:key="item.id">
									</el-option>
								</el-select>
							</template>
						</vxe-form-item>
						<vxe-form-item title="电池型号" field="batModelId" span="24" :item-render="{}" title-overflow>
							<template #default="params">
								<el-select v-model="params.data.batModelId" filterable clearable
									@change="$refs.xForm.updateStatus(params)" placeholder="请选择电池型号">
									<el-option :value="item.id" :label="item.batModel" v-for="(item,index) in modelList"
										:key="item.id">
									</el-option>
								</el-select>
							</template>
						</vxe-form-item>
					</vxe-form-gather>
					<vxe-form-item align="center" span="24" :item-render="{}">
						<template #default>
							<vxe-button type="submit" status="primary">提交</vxe-button>
							<vxe-button type="reset">重置</vxe-button>
						</template>
					</vxe-form-item>
				</vxe-form>
			</template>
		</vxe-modal>
	</div>
</template>

<script>
	import {
		sava,
		edit,
		getcompany,
		getDepList,
		btypelist
	} from './index.js';
	import{list} from '../batmodel/index.js';
	import {
		checkNumber
	} from '@/shop/util/validator.js'
	export default {
		data() {
			return {
				formData2: {
					"batModelId": '',
					"batNo": "",
					"batTypeId": 1,
					"companyId": 0,
					"operationDepartment": 1,
					"pd": "",
					"sd": "",
				},
				showment:true,
				companyact: '',
				depment: '',
				companylist: [],
				departmentlist: [],
				userinfo: {},
				loading2: false,
				formRules2: {
					batModelId: [{
						required: true,
						message: '请输入电池包段名称',
						trigger: 'blur'
					}],
					batNo: [{
						required: true,
						message: '请输入出生天数起始',
						trigger: 'blur'
					}],
					companyId: [{
						required: true,
						message: '请选择公司'
					}],
					operationDepartment: [{
						required: true,
						message: '请输入部门'
					}],
					pd: [{
						required: true,
						message: '请选择生产日期'
					}],
					sd: [{
						required: true,
						message: '请选择销售日期'
					}]
				},
				dialogVisible: false,
				loading: false,
				typeList: [{
						label: '三元锂',
						value: '1'
					},
					{
						label: '二氧化硅',
						value: '2'
					}
				],
				modelList: []

			};
		},
		created() {
			this.btypelist();
			this.getmodel();

		},
		methods: {
			handleClose(done) {
				this.resetForm('ruleForm');
				done();
			},
			slel(e){
				this.showment = false;
				let that = this;
				that.showment = true;
			},
			open(item) {
				console.log(item)
				this.formData2 = {
					...item
				};
				let userinfo = JSON.parse(localStorage.getItem("userinfo"));
				this.userinfo = userinfo;
				if (userinfo.companyid != 1) {
					this.formData2.companyId = userinfo.companyid;

				}
				this.getcompany();
				this.getDepList();
				this.dialogVisible = true;
			},
			compancheg(e) {
				this.formData2.operationDepartment = '';
				this.companylist.forEach(item=>{
					if(item.id==this.formData2.companyId){
						this.formData2.company = item
					}
				})
				
				this.getDepList();
			},
			//公司
			async getcompany() {
				let result = await getcompany();
				this.companylist = result.obj;
			},
			//部门
			async getDepList() {
				let parm = {
					"address": "",
					"id": this.formData2.companyId,
					"nameCN": "",
					"nameEN": "",
					"remark": ""
				}

				let result = await getDepList(parm);

				this.departmentlist = result.obj;
			},
			//获取型号
			async getmodel() {
				let parm = {
					batModel: '', //型号
					pageIndex: 1,
					pageSize: 1000,
				};
				let result = await list(parm);
				//console.log("返回结果", result);
				this.modelList = result.data.list
			},
			submitEvent2(e) {
				console.log(e);
				this.loading2 = true
				setTimeout(() => {
					this.loading2 = false
					this.oldsava();
				}, 1000)
			},
			searchEvent() {
				this.msgSuccess('查询事件')
			},
			resetEvent() {
				this.msgSuccess('重置')
			},
			async btypelist() {
				let parm = {
					pageNo: 1,
					pageSize: 1000
				};
				let result = await btypelist(parm);
				//console.log("返回结果", result);
				this.typeList = result.data
			},
			async oldsava() {
				this.loading = true;
				// this.ruleForm.token = localStorage.getItem('goods__token')
				// this.ruleForm.oldname = this.ruleForm.oname;
				let result;
				if (this.formData2.id) {
					result = await edit(this.formData2);
				} else {
					result = await sava(this.formData2);
				}
				this.loading = false;
				if (result.code == 1) {
					if (this.formData2.id === undefined) {
						this.msgSuccess("新增成功");
					} else {
						this.msgSuccess("修改成功");
					}

					this.resetForm('formData2');
					this.dialogVisible = false;
					this.$emit('oldlist')
				}

			}
		}
	};
</script>

<style></style>
